<!--通用顶部导航栏-->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:;">林灿明的个人网站</a>
        </div>

        <div class="collapse navbar-collapse" id="top-collapse">
            <ul class="nav navbar-nav">
                <li v-bind:class="{active: home_active}"><a v-bind:href="home_url">首页</a></li>
                <li v-bind:class="{active: practice_active}"><a v-bind:href="practice_url">小实践</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <!--  显示用户姓名-->
                <li class="dropdown" v-if="user_name">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户姓名 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/web/login/logout">退出</a></li>
                    </ul>
                </li>
                <!--登录/注册按钮-->
                <li v-else>
                    <a href="/web/login/login" style="display: inline-block; padding-right: 0;">登录</a>
                    <div href="javascript:;" style="display: inline-block; padding: 15px 0; color: #9d9d9d">/</div>
                    <a href="/web/login/register" style="display: inline-block; padding-left: 0;">注册</a>
                </li>


            </ul>
        </div>
    </div>
</nav>

<script type="text/javascript">
    var current_page = "{$current_page}" || '';
    var host_name = "{$host_name}" + 'web/index/' || '';
    var carousel_vue = new Vue({
        el: '#top-collapse',
        data: {
            'home_url': 'javascript:;',
            'practice_url': 'javascript:;',
            'home_active': false,
            'practice_active': false,
            'user_name': "{$user_name}"
        },
        mounted: function() {
            this.home_url =  host_name + 'index';
            this.practice_url = host_name + 'practice';
            switch (current_page) {
                case 'index':
                    this.practice_url = host_name + 'practice';
                    this.home_active = true;
                    break;
                case 'excel':
                case 'practice':
                case 'ueditor':
                case 'elasticsearch':
                case 'swoolechat':
                case 'danmu':
                    this.home_url =  host_name + 'index';
                    this.practice_active = true;
                    break;
                case 'errorhint':
                    this.practice_url = host_name + 'practice';
                    this.home_url =  host_name + 'index';
                    break;
            }
        },
    });
</script>